<template>
  <div class="customer-container">
    <el-menu :default-active="active" class="menu" @select="selectHandle">
      <el-menu-item index="FrontMine">
        <el-icon>
          <User />
        </el-icon>
        <span>账户信息</span>
      </el-menu-item>
      <el-menu-item index="FrontOrderList">
        <el-icon>
          <Tickets />
        </el-icon>
        <span>我的订单</span>
      </el-menu-item>
      <el-menu-item index="FrontAppointmentList">
        <el-icon>
          <Files />
        </el-icon>
        <span>体检预约</span>
      </el-menu-item>
      <el-menu-item index="FrontCustomerIm">
        <el-icon>
          <Collection />
        </el-icon>
        <span>客服咨询</span>
      </el-menu-item>
    </el-menu>
    <div class="content"><router-view /></div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref, getCurrentInstance } from 'vue';
import router from '../../router/index';
const { proxy } = getCurrentInstance();
//默认选中的菜单 高亮
let active = ref('FrontMine');

//路由切换
function selectHandle(val){
  active = ref(val)//切换高亮
  //路由切换
  router.push({ name: val });
}

//获取当前页面路由 激活菜单高亮
let name = router.currentRoute.value.name;
active = ref(name);

</script>


<style lang="less" scoped>
@import url('customer.less');
</style>

